<template>
  <el-aside :width="isCollapse ? '64px' : '200px'" class="aside-menu">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      :collapse="isCollapse"
      :collapse-transition="true"
      router
      unique-opened
      background-color="#fff"
      text-color="#303133"
      active-text-color="#409EFF"
      @select="handleSelect"
    >
      <el-menu-item index="/home">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">基础系统管理</span>
        </template>
        <el-menu-item index="/home/uiUser">用户管理</el-menu-item>
        <el-menu-item index="/home/UiPermissionManagement">管理员设置</el-menu-item>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span slot="title">内容管理</span>
        </template>
        <el-menu-item index="/home/eventManagement">活动管理</el-menu-item>
        <el-menu-item index="/home/classification">活动分类</el-menu-item>
        <el-menu-item index="/home/videoManagement">视频管理</el-menu-item>
      </el-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-s-comment"></i>
          <span slot="title">日志</span>
        </template>
        <el-menu-item index="/home/loginLog">登录日志</el-menu-item>
        <el-menu-item index="/home/operationLog">操作日志</el-menu-item>
      </el-submenu>

      <el-menu-item index="/home/contenFeedback">
        <i class="el-icon-question"></i>
        <span slot="title">问题反馈</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: 'UiAside',
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 定义路由和父菜单的映射关系
      menuMap: {
        '/home/uiUser': '1',
        '/home/UiPermissionManagement': '1',
        '/home/eventManagement': '2',
        '/home/classification': '2',
        '/home/videoManagement': '2',
        '/home/loginLog': '3',
        '/home/operationLog': '3'
      }
    }
  },
  computed: {
    activeMenu () {
      return this.$route.path
    }
  },
  methods: {
    handleSelect (index) {
      // 获取当前选中菜单项的父菜单index
      const parentIndex = this.menuMap[index]
      if (parentIndex) {
        // 为当前选中项的父菜单添加激活状态
        const submenu = this.$el.querySelector(`.el-submenu[index="${parentIndex}"]`)
        if (submenu) {
          // 移除其他子菜单的高亮
          const allSubmenus = this.$el.querySelectorAll('.el-submenu')
          allSubmenus.forEach(el => {
            el.classList.remove('is-active')
            const title = el.querySelector('.el-submenu__title')
            if (title) {
              title.style.color = ''
            }
          })
          // 添加当前子菜单的高亮
          submenu.classList.add('is-active')
          const title = submenu.querySelector('.el-submenu__title')
          if (title) {
            title.style.color = 'var(--primary-color)'
          }
        }
      }
    }
  },
  watch: {
    $route: {
      handler (route) {
        // 路由变化时自动触发选择事件
        this.handleSelect(route.path)
      },
      immediate: true
    }
  }
}
</script>

<style>
.aside-menu {
  height: 100%;
  border-right: 1px solid var(--border-color);
  background-color: var(--aside-background);
  overflow: hidden;
}

.el-menu {
  border-right: none !important;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 隐藏滚动条但保持可滚动 */
.el-menu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 折叠状态下的菜单 */
.el-menu--collapse {
  width: 64px !important;
}

/* 确保内容不会溢出 */
.el-menu--collapse > .el-menu-item [class^="el-icon-"] + span,
.el-menu--collapse > .el-submenu > .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

/* 基础样式 */
.el-menu-item,
.el-submenu__title {
  height: 50px !important;
  line-height: 50px !important;
  transition: all 0.3s !important;
}

/* 独立菜单项样式（首页和问题反馈） */
.el-menu > .el-menu-item {
  padding-left: 20px !important;
}

.el-menu > .el-menu-item.is-active {
  color: var(--primary-color) !important;
  background: linear-gradient(90deg, var(--hover-color) 0%, transparent 100%) !important;
}

.el-menu > .el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background-color: var(--primary-color);
}

/* 子菜单项样式 */
.el-submenu .el-menu-item {
  padding-left: 54px !important;
  min-width: auto !important;
}

/* 父菜单样式 */
.el-submenu__title {
  padding-left: 20px !important;
}

/* 父菜单样式 */
.el-submenu.is-active > .el-submenu__title {
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  background: var(--card-background) !important;
}

.el-submenu.is-active > .el-submenu__title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary-color), var(--primary-hover));
}

/* 悬浮效果 */
.el-menu-item:hover {
  background-color: var(--hover-color) !important;
}

.el-submenu__title:hover {
  background-color: var(--card-background) !important;
}

/* 图标样式 */
[class^="el-icon-"] {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  transition: all 0.3s;
}

.el-menu--collapse [class^="el-icon-"] {
  margin: 0;
}

/* 子菜单展开时的样式 */
.el-submenu.is-opened > .el-submenu__title {
  background-color: var(--card-background) !important;
}

.el-submenu.is-opened > .el-menu {
  background-color: var(--background-color) !important;
}

/* 子菜单项的图标 */
.el-menu-item [class^="el-icon-"] {
  color: var(--text-color-secondary);
}

.el-menu-item.is-active [class^="el-icon-"] {
  color: var(--primary-color);
}

/* 父菜单的图标 */
.el-submenu__title [class^="el-icon-"] {
  color: var(--text-color);
}

.el-submenu.is-active > .el-submenu__title [class^="el-icon-"] {
  color: var(--primary-color);
}

/* 折叠时的样式 */
.el-menu--collapse .el-submenu.is-active > .el-submenu__title {
  background: linear-gradient(90deg, var(--hover-color) 0%, transparent 100%) !important;
}

/* 弹出的子菜单样式 */
.el-menu--popup {
  padding: 0 !important;
  min-width: 160px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

.el-menu--popup .el-menu-item {
  padding: 0 20px !important;
  height: 40px !important;
  line-height: 40px !important;
}
</style>
